<template>
  <el-dialog :visible.sync="visible" center title="上传文件" width="30%">
    <el-upload
      :before-upload="beforeUpload"
      :file-list="fileList"
      action=""
      class="upload-demo"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doImportExcel">上传</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { importExcel } from "@/api/file/file";
export default {
  name: "ExcelUpload",
  props: {
    uploadDialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      fileList: [],
      visible: false
    };
  },
  watch: {
    uploadDialogVisible() {
      this.visible = !this.visible;
    }
  },
  methods: {
    beforeUpload(file, fileList) {
      if (!file.name.endsWith(".xlsx")) {
        this.$message.warning("限xlsx文件格式");
        return false;
      }
      this.fileList = [file]; // 保存当前文件
      return false;
    },
    doImportExcel() {
      const excelFile = new FormData();
      excelFile.append("excelFile", this.fileList[0]);
      importExcel(excelFile).then(res => {
        this.$emit("closeDialog", true);
        this.fileList = [];
        this.$emit('fileUpload')
        this.$message.success(res.msg)
      });
    },
    cancel() {
      this.$emit("closeDialog", true);
    }
  }
};
</script>

<style scoped></style>
